<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<!-- 原版存档 -->
	<meta charset="UTF-8">
	<title>分店管理-门禁管理</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
	<script src="/js/common.js"></script>
</head>
<style>
::-webkit-scrollbar-thumb {
  background:#a2a2a2; 
  border-radius: 10px;
  height:50%;
}
::-webkit-scrollbar{width:6px;}
body{
	overflow-y: scroll;
} 
body{
	height: 100%;
	overflow-y:scroll;
}
</style>
<body>
<div style="width: 100%; height: 100%; position: relative;">
	<div class="kb-form-container layui-form">
		<div class="kb-title border-none">
			<i class="layui-icon layui-icon-rate" style="font-size: 18px; margin-right: 5px; color: rgb(102, 102, 102);"></i><span>会员选择</span>
		</div>
		<div class="pos-row mag-bot-20">
			<div class="flex transfer-box" >
				<div class="transfer-container" style="flex:1;border-right: none;">
					<div class="transfer-header flex-center border-none">
						<span class="title">会员</span><span class="show-count">(0)</span>
					</div>
					<div class="transfer-wrap">
						<div class="transfer-content">
							
						</div>
					</div>
		        </div>
		        <div class="line-v"></div>
		        <div class="transfer-container" style="flex:1;border-left: none;">
					<div class="transfer-header flex-center"><span class="title">已添加</span><span class="show-count">(0)</span></div>
					<div class="transfer-target">
						<div class="transfer-content"></div>
					</div>
		        </div>
		    </div>		    
		</div>
		<div class="layui-form-item">
		    <div class="layui-inline">
			    <label class="layui-form-label" style="width: 58px;">开始日期</label>
		        <div class="layui-input-inline" style="width: 170px;">
		        	<input type="text" name="bookStartDate" id="bookStartDate" lay-verify="bookStartDate" placeholder="" autocomplete="off" class="layui-input">
		        </div>
		    </div>
		     <div class="layui-inline">
		        <label class="layui-form-label text-r" style="width: 58px;">开始时间</label>
		        <div class="layui-input-inline" style="width:170px;">
					<select id="end" name="end" lay-verify="end">
				        <option value="8,1">8:00</option>
				        <option value="8,2">8:30</option>
				        <option value="9,1">9:00</option>
				        <option value="9,2">9:30</option>
				        <option value="10,1">10:00</option>
				        <option value="10,2">10:30</option>
				        <option value="11,1">11:00</option>
				        <option value="11,2">11:30</option>
				        <option value="12,1">12:00</option>
				        <option value="12,2">12:30</option>
				        <option value="13,1">13:00</option>
				        <option value="13,2">13:30</option>
				        <option value="14,1">14:00</option>
				        <option value="14,2">14:30</option>
				        <option value="15,1">15:00</option>
				        <option value="15,2">15:30</option>
				        <option value="16,1">16:00</option>
				        <option value="16,2">16:30</option>
				        <option value="17,1">17:00</option>
				        <option value="17,2">17:30</option>
				        <option value="18,1">18:00</option>
				        <option value="18,2">18:30</option>
				        <option value="19,1">19:00</option>
				        <option value="19,2">19:30</option>
				        <option value="20,1">20:00</option>
				        <option value="20,2">20:30</option>
				        <option value="21,1">21:00</option>
				        <option value="21,2">21:30</option>
				        <option value="22,1">22:00</option>
				        <option value="22,2">22:30</option>
				        <option value="23,1">23:00</option>
				        <option value="23,2">23:30</option>
				        <option value="24,1">24:00</option>
				    </select>
		        </div>
		     </div>
		</div>
		<div class="layui-form-item">
		    <div class="layui-inline">
			    <label class="layui-form-label" style="width: 58px;">结束日期</label>
		        <div class="layui-input-inline" style="width: 170px;">
		        	<input type="text" name="bookEndDate" id="bookEndDate" lay-verify="bookEndDate" placeholder="" autocomplete="off" class="layui-input">
		        </div>
		    </div>
		     <div class="layui-inline">
		        <label class="layui-form-label text-r" style="width: 58px;">结束时间</label>
		        <div class="layui-input-inline" style="width:170px;">
					<select id="end" name="end" lay-verify="end">
				        <option value="8,1">8:00</option>
				        <option value="8,2">8:30</option>
				        <option value="9,1">9:00</option>
				        <option value="9,2">9:30</option>
				        <option value="10,1">10:00</option>
				        <option value="10,2">10:30</option>
				        <option value="11,1">11:00</option>
				        <option value="11,2">11:30</option>
				        <option value="12,1">12:00</option>
				        <option value="12,2">12:30</option>
				        <option value="13,1">13:00</option>
				        <option value="13,2">13:30</option>
				        <option value="14,1">14:00</option>
				        <option value="14,2">14:30</option>
				        <option value="15,1">15:00</option>
				        <option value="15,2">15:30</option>
				        <option value="16,1">16:00</option>
				        <option value="16,2">16:30</option>
				        <option value="17,1">17:00</option>
				        <option value="17,2">17:30</option>
				        <option value="18,1">18:00</option>
				        <option value="18,2">18:30</option>
				        <option value="19,1">19:00</option>
				        <option value="19,2">19:30</option>
				        <option value="20,1">20:00</option>
				        <option value="20,2">20:30</option>
				        <option value="21,1">21:00</option>
				        <option value="21,2">21:30</option>
				        <option value="22,1">22:00</option>
				        <option value="22,2">22:30</option>
				        <option value="23,1">23:00</option>
				        <option value="23,2">23:30</option>
				        <option value="24,1">24:00</option>
				    </select>
		        </div>
		     </div>
		</div>
	</div>
</div>
<script>
$(function(){
	setHeight();
	layui.use(['element',"layer","form",'laydate'], function(){
		var layer=layui.layer,form = layui.form,laydate = layui.laydate;			
		//日期
		laydate.render({
		  elem: '#bookStartDate',
		  value: getnow().year+"-"+getnow().month+"-"+getnow().date
		});	
		laydate.render({
	      elem: '#bookEndDate',
	      value: setDate(getnow().year,getnow().month,getnow().date+1).year+"-"+setDate(getnow().year,getnow().month,getnow().date+1).month+"-"+setDate(getnow().year,getnow().month,getnow().date+1).date
		});	
	});
	var teamData=[
		{
			id: 432, 
			simpleName: "王晓晋的测试团队",
			users:[
					{id: 88, name: "test", name_pinyin: "test", phone_num: "13301319823"},
					{id: 89, name: "梦娇", name_pinyin: "meng jiao", phone_num: "13301319823"},
					{id: 90, name: "传龙", name_pinyin: "chuan long", phone_num: "13301319823"},
				]
		},
		{
			id: 431, 
			simpleName: "周洋",
			users:[
					{id: 100, name: "马乐", name_pinyin: "ma le", phone_num: "13301319823"},
					{id: 101, name: "李佩珊", name_pinyin: "li pei shan", phone_num: "13301319823"},
					{id: 109, name: "李晓舒", name_pinyin: "li xiao shu", phone_num: "13301319823"},
					{id: 110, name: "蒋媛媛", name_pinyin: "jiang yuan yuan", phone_num: "13301319823"},
				]
		},
		{
			id: 43, 
			simpleName: "韶九影视",
			users:[
					{id: 1, name: "田佳玉", name_pinyin: "tian jia yu", phone_num: "13301319823"},
					{id: 2, name: "孟斯静", name_pinyin: "meng si jing", phone_num: "13301319823"},
					{id: 3, name: "郑博雅", name_pinyin: "zheng bo ya", phone_num: "13301319823"},
					{id: 4, name: "赵莹", name_pinyin: "zhao ying", phone_num: "13301319823"},
				]
		}
	];

//处理一下门禁的数据格式，跟团队人员的一致


	//渲染左侧会员团队；
	renderTeam($('.transfer-wrap>.transfer-content').eq(0));

	//渲染左侧门禁信息；
	renderTeam($('.transfer-wrap>.transfer-content').eq(0));
//点击下拉
	
	$('.transfer-wrap>.transfer-content').on("click",".toggle-icon",function(){
		var firstTierObj=$(this).parents(".first-tier");
		var index=$(firstTierObj).index();
		if($(this).hasClass('layui-icon-right')){
			var secondArr=teamData[index]["users"];
			$(this).removeClass('layui-icon-right').addClass('layui-icon-down');
			renderMember(secondArr,firstTierObj)
			setNum();//计算头部显示个数
		}else{
			$(this).removeClass('layui-icon-down').addClass('layui-icon-right');
			$(firstTierObj).children('.second-tier-item').remove();
		}
		
	})

//点击左侧添加按钮
	var newArr=[];//右侧渲染的数据；
	$('.transfer-wrap>.transfer-content').on("click",".adder-subtractor-btn",function(){
		var parentLabel=$(this).parent();
		var parentFirst=$(parentLabel).parent();
		var indFirst=$(parentLabel).parent().index();
		var numFirst=$(parentFirst).parent().children().length;
		if(parentLabel.hasClass("parent-label")){//点击标题的添加；
			if(newArr.length>0){
				judgeTimeRight(indFirst);
			}else{
				newArr.push(teamData[indFirst]);
			}
			renderAdd(newArr);//添加右侧列表
			teamData.splice(indFirst,1);			
		}else{//点击小列表的添加
			var firstTierInd=$(parentFirst).parent().parent('.first-tier').index(); 
			getNewArr(firstTierInd,indFirst);
			renderAdd(newArr);			
		};
		if(numFirst<=1){
			$(this).parents(".first-tier").remove();
		}else{
			$(parentFirst).remove();
		}
		setNum()
		//console.log(newArr,teamData,"add")
	})
//点击右侧删除按钮
	$('.transfer-target>.transfer-content').on("click",".adder-subtractor-btn",function(){
		var parentLabel=$(this).parent();
		var parentFirst=$(parentLabel).parent();
		var indFirst=$(parentLabel).parent().index();
		var numFirst=$(parentFirst).parent().children().length;
		if(parentLabel.hasClass("parent-label")){//点击标题的删除；
			if(teamData.length>0){
				//console.log(newArr,teamData,"nnnnnnnnnnnnnnn")
				judgeTime(indFirst)
			}else{
				//console.log("mmmmmmmmmmm")
				teamData.unshift(newArr[indFirst]);
				prependTeam(newArr[indFirst],$('.transfer-wrap>.transfer-content'));
			}			
			newArr.splice(indFirst,1);
			renderAdd(newArr);
		}else{//点击小列表的删除
			var firstTierInd=$(parentFirst).parent().parent('.first-tier').index(); 
			getNewTeam(firstTierInd,indFirst)
			renderAdd(newArr);			
		}
		if(numFirst<=1){
			$(this).parents(".first-tier").remove();
		}else{
			$(parentFirst).remove();
		}
		setNum()
		//console.log(newArr,teamData,"del")
	})
	
	//渲染左侧的会员团队
	function renderTeam(node){
		var teamStr="";
		for(var i=0;i<teamData.length;i++){
			teamStr+=`<div class="first-tier">`
				+`<label class="parent-label flex-center">`
					+`<div class="load-btn">`
						+`<span class="toggle-trans-btn"><i class="toggle-icon layui-icon layui-icon-right"></i></span>`
					+`</div>`
					+`<div class="data-name"><span>`+teamData[i].simpleName+`</span></div>`
					+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></div>`
				+`</label>`
			+`</div>`
		};
		$(node).html(teamStr)
		//$('.transfer-wrap>.transfer-content').html(teamStr)
	}
	//在左侧追加的会员团队
	function prependTeam(prependData,node){
		var teamStr="";
		//console.log(prependData,node,"11111111111")
		if(prependData){
				teamStr+=`<div class="first-tier">`
					+`<label class="parent-label flex-center">`
						+`<div class="load-btn">`
							+`<span class="toggle-trans-btn"><i class="toggle-icon layui-icon layui-icon-down"></i></span>`
						+`</div>`
						+`<div class="data-name"><span>`+prependData.simpleName+`</span></div>`
						+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></div>`
					+`</label>`;
				if(prependData.users.length>0){
					teamStr+=`<div class="second-tier-item">`;
					for(var j=0;j<prependData.users.length;j++){
						var sortName=prependData.users[j].name.substr(0,1)
						teamStr+=`<div class="second-tier">`
									+`<label class="children-label flex-between">`
										+`<div class="data-name">`	
											+`<div style=" background-color: rgb(236, 136, 192);">`+sortName+`</div>`
											+`<span>`+prependData.users[j].name+`</span>`
										+`</div>`
										+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></div>`
									+`</label>`
								+`</div>`				
					}
					teamStr+=`</div>`;
				};
				teamStr+=`</div>`;					
		}
		$(node).prepend($(teamStr))
		//$('.transfer-wrap>.transfer-content').html(teamStr)
	}
	//左侧追加团队里面的人员
	function prependUsers(usersData,node){
		var str='';
		for(var i=0;i<usersData.length;i++){
			var sortName=usersData[i]['name'].substr(0,1);
			console.log(usersData[i]['name'],"usersData")
			str+=`<div class="second-tier">`
					+`<label class="children-label flex-between">`
						+`<div class="data-name">`	
							+`<div style=" background-color: rgb(236, 136, 192);">`+sortName+`</div>`
							+`<span>`+usersData[i]['name']+`</span>`
						+`</div>`
						+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></div>`
					+`</label>`
				+`</div>`
		};
		$(node).prepend(str);
	}
	//渲染左侧的会员团队下的人
	function renderMember(arrMember,node){
		var secondStr='<div class="second-tier-item">';
		for(var j=0;j<arrMember.length;j++){
				var secondName=arrMember[j]['name'].substr(0,1);
				secondStr+=`<div class="second-tier">`
								+`<label class="children-label flex-between">`
									+`<div class="data-name">`	
										+`<div style=" background-color: rgb(236, 136, 192);">`+secondName+`</div>`
										+`<span>`+arrMember[j]['name']+`</span>`
									+`</div>`
									+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></div>`
								+`</label>`
							+`</div>`				
			}
			secondStr+='</div>';
			node.append(secondStr);
	}
	//渲染右侧的会员和团队下的人
	function renderAdd(arrMember){
		var teamStr="";
		//console.log(arrMember,"11111111111")
		if(arrMember.length>0){
			for(var i=0;i<arrMember.length;i++){
				teamStr+=`<div class="first-tier">`
					+`<label class="parent-label flex-center">`
						+`<div class="data-name"><span>`+arrMember[i].simpleName+`</span></div>`
						+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-close" style="margin-right: 0px;"></i></div>`
					+`</label>`;
				if(arrMember[i].users.length>0){
					teamStr+=`<div class="second-tier-item">`;
					for(var j=0;j<arrMember[i].users.length;j++){
						var sortName=arrMember[i].users[j].name.substr(0,1);
						teamStr+=`<div class="second-tier">`
									+`<label class="children-label flex-between">`
										+`<div class="data-name">`	
											+`<div style=" background-color: rgb(236, 136, 192);">`+sortName+`</div>`
											+`<span>`+arrMember[i].users[j].name+`</span>`
										+`</div>`
										+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-close" style="margin-right: 0px;"></i></div>`
									+`</label>`
								+`</div>`				
					}
					teamStr+=`</div>`;
				};
				teamStr+=`</div>`;					
			};
		}
		$('.transfer-target>.transfer-content').html(teamStr);		
	}
	//渲染左侧的会员和团队下的人
	function renderTeamAdd(arrMember){
		var teamStr="";
		//console.log(arrMember,"11111111111")
		if(arrMember.length>0){
			for(var i=0;i<arrMember.length;i++){
				teamStr+=`<div class="first-tier">`
							+`<label class="parent-label flex-center">`
								+`<div class="load-btn">`
									+`<span class="toggle-trans-btn"><i class="toggle-icon layui-icon layui-icon-down"></i></span>`
								+`</div>`
								+`<div class="data-name"><span>`+arrMember[i].simpleName+`</span></div>`
								+`<div class="adder-subtractor-btn flex-center"><i class="toggle-icon layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></div>`
							+`</label>`;
				if(arrMember[i].users.length>0){
					teamStr+=`<div class="second-tier-item">`;
					for(var j=0;j<arrMember[i].users.length;j++){
						var sortName=arrMember[i].users[j].name.substr(0,1);
						teamStr+=`<div class="second-tier">`
									+`<label class="children-label flex-between">`
										+`<div class="data-name">`	
											+`<div style=" background-color: rgb(236, 136, 192);">`+sortName+`</div>`
											+`<span>`+arrMember[i].users[j].name+`</span>`
										+`</div>`
										+`<div class="adder-subtractor-btn flex-center"><i class="layui-icon layui-icon-add-1" style="margin-right: 0px;"></i></div>`
									+`</label>`
								+`</div>`				
					}
					teamStr+=`</div>`;
				};
				teamStr+=`</div>`;					
			};
		}
		$('.transfer-wrap>.transfer-content').html(teamStr);		
	}
	//设置单个添加的数据
	function getNewArr(firstInd,secondInd){
		if(newArr.length<=0){
			newArr.push(teamData[firstInd]);
			//虽然两个不同的数组（newArr，teamData），但是保存的是同一个对象；直接改变一个的内容，会有影响，需要处理
			newArr=JSON.parse(JSON.stringify(newArr));
			newArr[0]['users'].length=0;
			newArr[0]['users'].push(teamData[firstInd]['users'][secondInd]);
			
		}else{
			getNewUsers(firstInd,secondInd);
		}
		if(teamData[firstInd]['users'].length>1){
			teamData[firstInd]['users'].splice(secondInd,1);
		}else{
			teamData.splice(firstInd,1)
		}
		
	}
	//设置左侧team的单个添加的数据
	function getNewTeam(firstInd,secondInd){
		if(teamData.length<=0){
			teamData.push(newArr[firstInd]);
			console.log(teamData,"teamData")
			//虽然两个不同的数组（newArr，teamData），但是保存的是同一个对象；直接改变一个的内容，会有影响，需要处理
			teamData=JSON.parse(JSON.stringify(teamData));
			teamData[0]['users'].length=0;
			teamData[0]['users'].push(newArr[firstInd]['users'][secondInd]);
			renderTeamAdd(teamData)
		}else{
			getNewTeamUsers(firstInd,secondInd);
		}
		if(newArr[firstInd]['users'].length>1){
			newArr[firstInd]['users'].splice(secondInd,1);
		}else{
			newArr.splice(firstInd,1)
		}
		
	}
	//点击全部删除按钮时，判断左侧是否存在团队
	function judgeTime(indFirst){
		for(var m=0;m<teamData.length;m++){
			//console.log(newArr,newArr[indFirst]['id'],"hhhhhhhhhhhhhhhhhhhh")
			if(teamData[m]['id']==newArr[indFirst]['id']){
				//console.log(teamData,newArr,"删除有团队的");
				//虽然两个不同的数组（newArr，teamData），但是保存的是同一个对象；直接改变一个的内容，会有影响，需要处理
				teamData=JSON.parse(JSON.stringify(teamData));
				teamData[m]['users']=newArr[indFirst]['users'].concat(teamData[m]['users']);
				var node=$('.transfer-wrap').find(".first-tier").eq(m).children('.second-tier-item');
				prependUsers(newArr[indFirst]['users'],node)
				return false;
			}
		}
		teamData.unshift(newArr[indFirst]);
		prependTeam(newArr[indFirst],$('.transfer-wrap>.transfer-content'))
	}
	//点击添加按钮时，判断右侧是否存在团队
	function judgeTimeRight(indFirst){
		for(var n=0;n<newArr.length;n++){
			if(newArr[n]['id']==teamData[indFirst]['id']){
				//虽然两个不同的数组（newArr，teamData），但是保存的是同一个对象；直接改变一个的内容，会有影响，需要处理
				newArr=JSON.parse(JSON.stringify(newArr));
				newArr[n]['users']=newArr[n]['users'].concat(teamData[indFirst]['users']);
				return false;
			}
		}
		newArr.unshift(teamData[indFirst]);
	}
	//点击添加按钮时，判断右侧是存在团队时，添加人员
	function getNewUsers(firstInd,secondInd){
		for(var i=0;i<newArr.length;i++){
			//console.log(newArr[i]["id"],"id")
			if(newArr[i]["id"]!==teamData[firstInd].id){
				//continue;
			}else{
				newArr[i]['users'].push(teamData[firstInd]['users'][secondInd]);
				return;
				console.log(newArr,"有团队，加人员")
			}
		}
		//虽然两个不同的数组（newArr，teamData），但是保存的是同一个对象；直接改变一个的内容，会有影响，需要处理
		newArr.unshift(teamData[firstInd]);
		newArr=JSON.parse(JSON.stringify(newArr));
		console.log(newArr,'没团队，不重复')
		newArr[0]['users'].length=0;
		newArr[0]['users'].push(teamData[firstInd]['users'][secondInd]);	
	}
	//点击删除单个按钮时判断左侧是否存在团队，添加人员
	function getNewTeamUsers(firstInd,secondInd){
		for(var i=0;i<teamData.length;i++){
			console.log(teamData,"id")
			if(teamData[i]["id"]==newArr[firstInd].id){
				teamData[i]['users'].unshift(newArr[firstInd]['users'][secondInd]);
				var node=$('.transfer-wrap').find(".first-tier").eq(i).children('.second-tier-item');
				console.log(newArr[firstInd]['users'][secondInd],"kkkkk")
				prependUsers([newArr[firstInd]['users'][secondInd]],node)
				return;
			}
		}
		//虽然两个不同的数组（newArr，teamData），但是保存的是同一个对象；直接改变一个的内容，会有影响，需要处理
		teamData.unshift(newArr[firstInd]);
		teamData=JSON.parse(JSON.stringify(teamData));
		teamData[0]['users'].length=0;
		teamData[0]['users'].push(newArr[firstInd]['users'][secondInd]);
		prependTeam(teamData[0],$('.transfer-wrap>.transfer-content'))	
	}
	//设置头部的显示数目
	function setNum(){
		var secondItemLeft=$('.transfer-wrap').find('.second-tier').length;
		var secondItemRight=$('.transfer-target').find('.second-tier').length;
		console.log(secondItemLeft,'numnum')
		$('.show-count').eq(0).text("("+secondItemLeft+")");
		$('.show-count').eq(1).text("("+secondItemRight+")");
	}
	function getnow(){
		var myDate = new Date();
		year=myDate.getFullYear(),//获取当前年
		month=myDate.getMonth()+1,//获取当前月
		date=myDate.getDate(),//获取当前日
		hours = myDate.getHours(), //截取小时 
		minutes = myDate.getMinutes(), //截取分钟
		allMinutes=hours*60+minutes;//过了多少分钟；
		return {
				year:year,
				month: month,
				date: date,
				hours:hours,
				allMinutes:allMinutes
		};
	}
	function setDate(year,month,day){
		var future=new Date(year,month-1,day),
		year=future.getFullYear(),//获取年
		month=future.getMonth()+1,//获取月
		date=future.getDate();//获取日
		return {
			year:year,
			month: month,
			date: date
		}
	}
	function setHeight(){
        var h = document.body.clientHeight*1;
    }
})

</script>
</body>
</html>